<template>
    <new-search-panel :showAdvanced="true" @search="onSearch" @reset="onReset">
        <template #default>
            <a-col :md="24" :sm="24">
                <a-form-item label="日志名称">
                    <a-input v-model:value="queryParam.name" :maxLength="35" allow-clear placeholder="请输入日志名称" />
                </a-form-item>
            </a-col>
            <a-col :md="24" :sm="24">
                <a-form-item label="操作类型">
                    <a-select v-model:value="queryParam.opType" allow-clear placeholder="请选择操作类型">
                        <a-select-option v-for="(item, index) in opTypeDict" :key="index" :value="item.code">
                            {{ item.value }}
                        </a-select-option>
                    </a-select>
                </a-form-item>
            </a-col>
            <a-col :md="24" :sm="24">
                <a-form-item label="是否成功">
                    <a-select v-model:value="queryParam.success" allow-clear placeholder="请选择是否成功">
                        <a-select-option v-for="(item, index) in successDict" :key="index" :value="item.code">
                            {{ item.value }}
                        </a-select-option>
                    </a-select>
                </a-form-item>
            </a-col>
        </template>
        <template #button>
            <a-popconfirm placement="top" title="确认清空日志？" @confirm="() => sysOpLogDelete()">
                <a-button>清空日志</a-button>
            </a-popconfirm>
        </template>
    </new-search-panel>
    <dynamic-table ref="tableRef" :columns="columns" :get-list-func="sysOpLogPage" :queryParam="queryParam" rowKey="id" :scrollX="1000" :fixed="true">
        <template #opType="{ text }">
            {{ filterEnum(opTypeDict, text) }}
        </template>
        <template #success="{ text }">
            {{ filterEnum(successDict, text) }}
        </template>
        <template #action="{ record }">
            <a @click="details(record)">查看详情</a>
        </template>
    </dynamic-table>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, ref, onMounted } from 'vue'
import { sysOpLogPage, sysOpLogDelete } from '@/api/system/log'
import { columns } from './columns'
import { useStore } from '@/store'
import { newSearchPanel, DynamicTable, ellipsis } from '@/components'
import { getFormSchema } from './form-schema'
import { useFormModal } from '@/hooks/useFormModal'
import { filterEnum } from '@/utils/common'

export default defineComponent({
    name: 'sys_log_mgr_op_log',
    components: {
        DynamicTable,
        newSearchPanel,
        columns,
        ellipsis
    },
    setup() {
        const tableRef = ref<any>(null)
        const store = useStore()
        const state = reactive({
            queryParam: {
                name: '',
                opType: undefined,
                success: undefined,
                descs: 'op_time'
            },
            sexlist: [],
            opTypeDict: [],
            successDict: [],
            tableLoading: false,
            rowSelection: {
                onChange: (selectedRowKeys: never[]) => {
                    state.rowSelection.selectedRowKeys = selectedRowKeys
                },
                selectedRowKeys: []
            }
        })
        onMounted(() => {
            store.dispatch('enums/getEnum', 'op_type').then((res) => {
                state.opTypeDict = res
            })
            store.dispatch('enums/getEnum', 'yes_or_no').then((res) => {
                state.successDict = res
            })
        })

        /**
         * 查询
         */
        function onSearch() {
            tableRef.value.queryParam = state.queryParam
            tableRef.value.resetPagination()
            tableRef.value.refreshTableData()
        }
        /**
         * 重置
         */
        function onReset() {
            state.queryParam = {
                name: '',
                opType: undefined,
                success: undefined,
                descs: 'op_time'
            }
            // 重置分页
            tableRef.value.resetPagination()
            tableRef.value.refreshTableData()
        }

        /**
         * 查看详情
         */
        const details = (record) => {
            useFormModal({
                title: '日志详情',
                formSchema: getFormSchema(),
                fields: record,
                width: '800px',
                handleOk: async (modelRef, state) => {}
            })
        }

        return {
            ...toRefs(state),
            columns,
            tableRef,
            onReset,
            onSearch,
            sysOpLogDelete,
            details,
            filterEnum,
            sysOpLogPage
        }
    }
})
</script>
